<?php get_header(); ?>

<div class="container">
    <div class="content">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <h1 class="post-title"><?php the_title(); ?></h1>

            <!-- 特色图片 -->
            <?php if (has_post_thumbnail()) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail('large'); ?>
                </div>
            <?php endif; ?>

            <div class="post-info">
                <div class="post-info__item">作者：<?php the_author(); ?></div>
                <div class="post-info__item">时间：<?php the_time('Y年m月d日'); ?></div>
                <div class="post-info__item">评论：<?php comments_number('0', '1', '%'); ?></div>
                <div class="post-info__item">点击量：<?php if (function_exists('the_views')) { the_views(); } ?></div>
            </div>

            <div class="post-tags">
                <?php 
                $post_tags = get_the_tags();
                if ($post_tags) {
                    foreach ($post_tags as $tag) {
                        $tag_class = 'tag tag' . mt_rand(1, 5); 
                        echo '<span class="' . esc_attr($tag_class) . '">' . esc_html($tag->name) . '</span>';
                    }
                }
                ?>
            </div>
            
            <div class="post-summary">
                <p><?php echo wp_trim_words(get_the_content(), 50, '...'); ?></p>
            </div>

            <div class="post-main-content">
                <h2 class="main-content-title">主要内容：</h2>
                <?php the_content(); ?>
            </div>

            <div class="post-social-share" aria-label="分享这篇文章">
                <h3>分享这篇文章：</h3>
                <a href="https://facebook.com/sharer/sharer.php?u=<?php echo get_permalink(); ?>" target="_blank">Facebook</a>
                <a href="https://twitter.com/share?url=<?php echo get_permalink(); ?>" target="_blank">Twitter</a>
                <a href="https://weibo.com/share/share.php?url=<?php echo get_permalink(); ?>" target="_blank">微博</a>
                <a href="https://linkedin.com/shareArticle?url=<?php echo get_permalink(); ?>" target="_blank">LinkedIn</a>
                <a href="https://pinterest.com/pin/create/button/?url=<?php echo get_permalink(); ?>" target="_blank">Pinterest</a>
            </div>

            <div class="related-posts">
                <h3>相关文章：</h3>
                <?php
                $related_posts = get_posts(array(
                    'category__in' => wp_get_post_categories(get_the_ID()),
                    'post__not_in' => array(get_the_ID()),
                    'posts_per_page' => 5,
                ));
                if ($related_posts) {
                    foreach ($related_posts as $post) {
                        setup_postdata($post); ?>
                        <div class="related-post"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                    <?php }
                    wp_reset_postdata();
                } else {
                    echo "<p>没有相关文章。</p>";
                }
                ?>
            </div>

            <!-- 上一篇和下一篇文章导航 -->
            <div class="post-navigation">
                <div class="prev-post"><?php previous_post_link('%link', '上一篇： %title'); ?></div>
                <div class="next-post"><?php next_post_link('%link', '下一篇： %title'); ?></div>
            </div>

        <?php endwhile; endif; ?>
    </div>
</div>

<style>
    .container {
        display: flex;
        justify-content: center;
        margin: 40px auto;
        min-width: 90vw;
    }
    .content {
        background-color: #ffffff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        padding: 30px;
        border-radius: 10px;
        position: relative;
        flex-grow: 1;
        top: 30px;
    }
    .post-title {
        font-size: 2.5em;
        margin: 0 0 20px;
        color: #000000;
    }
    .post-thumbnail img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    .post-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        font-size: 0.9em;
        color: #7f8c8d;
    }
    .post-info__item {
        width: 25%;
    }
    .post-tags {
        margin: 15px 0;
        font-size: 1em;
    }
    .tag {
        display: inline-block;
        margin-right: 5px;
        padding: 5px 15px;
        border-radius: 20px;
        color: #ffffff;
        font-size: 14px;
    }
    .tag1 { background-color: #e74c3c; }
    .tag2 { background-color: #3498db; }
    .tag3 { background-color: #2ecc71; }
    .tag4 { background-color: #f39c12; }
    .tag5 { background-color: #9b59b6; }

    .post-summary {
        height: 100px;
        overflow: hidden;
        font-size: 1em;
        line-height: 1.6;
        margin-bottom: 20px;
        color: #34495e;
    }
    .post-main-content {
        font-size: 1em;
        line-height: 1.8;
        color: #34495e;
        margin-bottom: 20px;
        text-align: left;
    }
    .main-content-title {
        font-size: 2em;
        margin: 40px 0 20px;
        color: #000000;
    }
    .post-social-share {
        margin: 20px 0;
        font-size: 1em;
    }
    .post-social-share a {
        margin-right: 15px;
        text-decoration: none;
        color: #3498db;
    }
    .related-posts {
        margin-top: 40px;
        background: #f9f9f9;
        padding: 20px;
        border-radius: 5px;
    }
    .related-posts h3 {
        margin-bottom: 15px;
        color: #000000;
    }
    .related-post {
        margin-bottom: 10px;
        font-size: 0.9em;
        color: #333;
    }
    .post-navigation {
        margin: 20px 0;
        font-size: 1em;
        display: flex;
        justify-content: space-between;
    }
    .prev-post, .next-post {
        flex: 1;
    }

    /* 媒体查询 */
    @media (max-width: 768px) {
        .post-info {
            flex-direction: column;
            align-items: flex-start;
        }
        .post-info__item {
            width: 100%;
            margin-bottom: 10px;
        }
        .content {
            padding: 15px;
        }
    }
</style>

<?php get_footer(); ?>
